<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>待{{ btnShow === true ? '分配' : '检测' }}任务列表</span>
      </div>
    </template>
    <div class="task-table">
      <el-table
        :data="feedbackList"
        style="width: 100%; height: 520px"
        height="520"
        :default-sort="{ prop: 'afDate', order: 'descending' }"
        table-layout="auto"
      >
        <el-table-column type="index" label="ID" width="50" align="center" />
        <el-table-column prop="afDate" label="反馈时间" sortable align="center" />
        <el-table-column prop="province" label="网格区域" align="center" />
        <el-table-column prop="address" label="详细地址" />
        <el-table-column prop="estimatedGrade" label="预估等级" width="150" sortable align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.estimatedGrade < 3" type="success">
              {{ scope.row.estimatedGrade }}
            </el-tag>

            <el-tag v-else-if="scope.row.estimatedGrade < 5" type="warning">
              {{ scope.row.estimatedGrade }}
            </el-tag>
            <el-tag v-else-if="scope.row.estimatedGrade < 7" type="danger">
              {{ scope.row.estimatedGrade }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              style="border-radius: 5px"
              plain
              size="small"
              @click="assignTask(scope.row)"
              v-if="btnShow"
            >
              <el-tooltip content="分配任务" placement="top"> 指派 </el-tooltip>
            </el-button>

            <el-button
              type="primary"
              style="border-radius: 5px"
              plain
              size="small"
              @click="show(scope.row)"
              v-if="!btnShow"
            >
              <el-tooltip content="前去填写" placement="top"> 检测 </el-tooltip>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="card-footer">欢迎来到任务列表页面@YTH科技有限公司</div>
    </template>
  </el-card>
</template>
<script setup>
import { useAqiFeedbackStore } from '@/stores/aqi/aqiFeedback.js'
import { useStatisticsStore } from '@/stores/statistics/statistics.js'
import { storeToRefs } from 'pinia'
import router from '@/router/index.js'

const aqiFeedbackStore = useAqiFeedbackStore()
const { feedbackList, currentAqiFeedback, drawerVisible, btnShow } = storeToRefs(aqiFeedbackStore)
const statisticsStore = useStatisticsStore()

const assignTask = (row) => {
  currentAqiFeedback.value = row
  drawerVisible.value = true
}

const show = (row) => {
  // console.log(row)
  currentAqiFeedback.value = row
  statisticsStore.isShow = true
  router.push('/home/statistics')
}
</script>

<style scoped lang="scss">
.el-card {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  .task-table {
    height: 480px;
  }
  .card-header {
    font-size: 25px;
    font-weight: bold;
  }

  .card-footer {
    font-size: 20px;
    text-align: right;
    color: #a1a1a5;
    margin-top: 10px;
  }
}
</style>
